<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test de JQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.7.min.js"></script>
        <script src="base64.js"></script>
    </head>
    <body>  
        <h1>Ajax avec JQuery</h1>
        <p>
          <a id="appelHTML" href="javascript:">Récupération HTML</a>
          <a id="appelPut" href="javascript:">Appel avec PUT</a>
          <a id="appelXML" href="javascript:">Appel avec XML</a>
        </p>
        <div id="zone" style="background: #EEEEEE; border: solid 1px orange;">Une zone</div>
        <script type="text/javascript" >
        // Travail apres le chargement de la page
        $(document).ready(function() {
          // Reaction du lien appelHTML
          $("#appelHTML").click(function(event) {
            $.ajax({
              // Methode HTTP
              type: "GET",
              url: "fragment.html",
              // Type de données retournées
              dataType : "html",
              //Traitement en cas d'erreur
              // xhr est la requete XMLHttpRequest sous-jacente
              error:function(xhr, string){
                $("#zone").html("Erreur : " + xhr.status );
              },
              // Traitement si ok (statut de la réponse entre 200 et 299
              success:function(data){
                $("#zone").html(data);
              }
            });
          });

          $("#appelPut").click(function(event) {
            var auth = "Basic " + Base64.encode("admin:admin");
            $.ajax({
              type: "PUT",
              url: "../../cinema/ws/artiste.php?id=1",
              data: {
                prenom: "Fanny",
                nom: "Ardant"
              },
              // Ajout d'une en-tete a la requete (avant l'envoi)
              beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", auth);
              },
              //Traitement en cas d'erreur
              error: function(xhr, string){
                $("#zone").html("Erreur : " + xhr.status + " " + xhr.statusText);
              },
              // Traitement si ok
              success: function(xml){
                $("#zone").html("Artiste mis à jour");
              }
            });
          });

          $("#appelXML").click(function(event) {
            $.ajax({
              type: "GET",
              url: "communes.xml",
              dataType : "xml",
              //Traitement en cas d'erreur
              error:function(xhr, string){
                $("#zone").html("Erreur : " + xhr.status );
              },
              // Traitement si ok
              success:function(xml){
                $("#zone").html("");
                // Creer un ul et l'ajouter a body
                var ul = $("<ul/>").appendTo("#zone");
                // appliquer a chaque commune la fonction en parametre
                $(xml).find("commune").each(function() {
                  $("<li/>", {
                    text: $(this).text()
                  }).appendTo($(ul));
                })
              }
            });
          });
          
        });
        </script>
    </body>
</html>
